<template>
  <view style="height: 100%; display: flex; flex-direction: column">

    <view style="height: 450rpx" v-if="data.form.listb && data.form.listb[data.line].type === 'video'">
      <video
        v-if="data.form.listb && data.form.listb[data.line].type === 'video'"
        :show-progress="data.form.speed"
        style="width: 100%; height: 225px"
        id="myVideo"
        :src="data.form.listb[data.line].file"
        @play="play(data.form.listb[data.line])"
        @ended="ended(data.form.listb[data.line])"
      ></video>
    </view>

    <view
      style="height: 500px; width: 100%; display: flex; justify-content: center"
      v-if="data.form.listb && data.form.listb[data.line].type === 'pdf'"
    >
      <iframe width="100%" :src="data.form.listb[data.line].file"></iframe>
    </view>

    <view style="overflow-y: auto; flex: 1; width: 100%">
      <scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
        <uni-section :title="data.form.title" type="line">
          <uni-list :border="true">
            <uni-list-item
              v-for="(it, i) in data.form.listb"
              :show-extra-icon="true"
              :extra-icon="{
                color: '#4cd964',
                size: '22',
                type: 'list',
              }"
              ellipsis="1"
              :class="data.line === i ? 'chooseStyle' : ''"
              :title="it.title"
              :rightText="rightText(it)"
              clickable
              @click="onClick(i)"
            >
            </uni-list-item>
          </uni-list>
        </uni-section>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
  import { reactive } from 'vue';
  import { onShow } from '@dcloudio/uni-app';
  import { courseApi, coursebApi } from '@/api/business/exam/course-api';
  import { formatDateTime } from '../../utils/str-util';

  const data = reactive({
    form: {
      listb: [
        {
          type: 'video',
        },
      ],
      listc: [],
    },
    line: 0,
  });

  const props = defineProps({
    docEntry: '',
  });

  function queryList() {
    courseApi.myInfo(props.docEntry).then((res) => {
      data.form = res.data;
    });
  }

  onShow(() => {
    queryList();
  });


  function play(item) {
    item.updateType = 'A';

    item.lineStatus = 'L'
    coursebApi.update(item).then((res) => {});
  }

  function ended(item) {
    item.updateType = 'B';
    item.lineStatus = 'C'
    coursebApi.update(item).then((res) => {});
  }

  function handleChangeVideo() {}

  function scrollTop() {}

  function upper() {}

  function lower() {}

  function scroll() {}

  function rightText(item) {
    if (item.lineStatus === 'O') {
      return '未开始';
    } else if (item.lineStatus === 'L') {
      return '进行中';
    } else if (item.lineStatus === 'C') {
      return '已完成';
    }
  }

  function onClick(item) {
    data.line = item;
  }
</script>

<style scoped>
  page {
    height: 100%;
  }

  .scroll-Y {
    height: 100%;
  }

  .scroll-view-item {
    height: 500rpx;
    line-height: 500rpx;
    text-align: center;
    font-size: 36rpx;
  }

  .chooseStyle {
    background-color: #cccccc !important;
  }
</style>
